$f: 19.2;


.home {
  position: relative;
  background: #F9F9F9;

  .bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      display: block;
      object-fit: cover;
      height: 100%;
    }
  }

  .main {
    padding: 206/$f+vw 160/$f+vw 120/$f+vw 160/$f+vw ;
    position: relative;
    z-index: 10;

    .section1 {

      .tag {
        color: #0F77FF;
        line-height: 1.5;
        text-transform: capitalize;
      }

      h1 {
        margin: 32/$f+vw 0 40/$f+vw 0;
        line-height: 1;
        text-transform: capitalize;
        font-weight: 400;
      }

      .des {
        font-weight: 300;
        line-height: 1.5;
        width: 1247/$f+vw;
      }

      .pic {
        margin: 44/$f+vw 0 100/$f+vw 0;
        img {
          width: 1176/$f+vw;
          height: 630/$f+vw;
          display: block;
          object-fit: cover;
        }
      }
      .info{
        // width: 1176/$f+vw;
        padding-left: 10/$f+vw;
        .item{
          display: flex;
          &:not(:last-child){
            margin-bottom: 60/$f+vw;
          }
          ul{
            li{
              list-style: disc;
              line-height: 2;
            }
            &:first-child{
              width: 450/$f+vw;
            }
            &:not(:last-child){
              margin-right: 100/$f+vw;
            }
          }
        }
      }
      .table{
        margin-top: 80/$f+vw;
        img{
          max-width: 1221/$f+vw;
        }
      }
    }

  }

  @media screen and (max-width: 1024px) {
    .main{
      padding: 120px 5% 60px 5%;
      .section1{
        h1{
          margin: 16px 0 20px 0;
          line-height: 1.2;
        }
        .des{
          width: 100%;
        }
        .pic{
          margin: 20px 0 50px 0;
          img{
            width: 100%;
            height: auto;
          }
        }
        .info{
          padding-left: 5%;
          .item{
            flex-direction: column;
            &:not(:last-child){
              margin-bottom: 30px;
            }
            ul{
              width: 100% !important;
            }
          }
        }
        .table{
          margin-top: 40px;
          img{
            max-width: inherit;
            width: 100%;
          }
        }
      }
    }
  }
}